<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>南方后街</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.validate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.form.js"></script>
<!--[if IE 6]>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/DD_belatedPNG.js"></script>
	<script type="text/javascript">
		DD_belatedPNG.fix('#logo a,#header_holder');
	</script>
<![endif]-->
<script type="text/javascript">
window.onload = function(){
	setTimeout(function(){
				var $ul = $("#content_right_2");
				var liHeight = $ul.find("div:last").height()+10;
				$ul.animate({marginTop : liHeight +"px"},1200,function(){
					$ul.find("div:last").prependTo($ul);
					$ul.find("div:first").hide();
					$ul.css({marginTop:0});
					$ul.find("div:first").fadeIn(1000);
				});        
		},1000);
}

$(function(){
		var scrtime;
		 $("#content_right_2").hover(function(){
				clearInterval(scrtime);
		},function(){
		scrtime = setInterval(function(){
				var $ul = $("#content_right_2");
				var liHeight = $ul.find("div:last").height()+10;
				$ul.animate({marginTop : liHeight +"px"},1500,function(){
					$ul.find("div:last").prependTo($ul);
					$ul.find("div:first").hide();
					$ul.css({marginTop:0});
					$ul.find("div:first").fadeIn(1000);
				});        
		},3400);			
		}).trigger("mouseleave");	 
});

function selectTag(showContent1,showContent2,selfObj){
	// 操作标签
	var tag1 = document.getElementById("content_left_login");
	var tag2 = document.getElementById("content_left_register");
	var tag3 = document.getElementById("content_left");
	var tag4 = document.getElementById("content_right");
	var tag5 = document.getElementById("reg_1");
	var tag6 = document.getElementById(selfObj);
	tag1.style.backgroundColor="#55a847";
	tag1.style.color="#ffffff";
	tag2.style.backgroundColor="#55a847";
	tag2.style.color="#ffffff";
	tag3.style.display="none";
	tag4.style.display="none";
	tag5.style.display="none";
	tag6.style.backgroundColor="#dddddd";
	tag6.style.color="#55a847";

	document.getElementById(showContent1).style.display = "block";
	document.getElementById(showContent2).style.display = "block";
	}

// 验证用户名格式是否正确
function checkUsername( username ){
	regExp = new RegExp(/^[a-zA-Z0-9-_]{5,30}$/);
	if( username.match(regExp) != null  ){
		return true ;
	}else{
		return false ;
	}
} 

//验证密码格式是否正确
function checkPassword( password ){
	regExp = new RegExp(/^[a-zA-Z0-9-_]{6,30}$/);
	if( password.match(regExp) != null  ){
		return true ;
	}else{
		return false ;
	}
} 

//验证邮箱格式是否正确
function checkEmail( email ){
	regExp = new RegExp(/^[a-zA-Z0-9]{5,15}@[a-zA-Z0-9]{2,10}[.](com|net)$/);
	if( email.match(regExp) != null  ){
		return true ;
	}else{
		return false ;
	}
}

// 验证电话号码格式是否正确
function checkTelphone( telPhone ){
	regExp = new RegExp(/^1\d{10}$/);
	if( telPhone.match(regExp) != null  ){
		return true ;
	}else{
		return false ;
	}
}

$(function(){
	
	//添加验证方法 (用户名)
	jQuery.validator.addMethod("isUsername", function(value, element) {   
		return this.optional(element) || checkUsername(value);   
	}, " * 请正确输入5-30位的用户名"); 
	
	// 添加验证方法 (邮箱地址)
	jQuery.validator.addMethod("isPassword", function(value, element) {   
		return this.optional(element) || checkPassword(value);   
	}, " * 请正确输入6-30位的密码"); 
	
	// 添加验证方法 (邮箱地址)
	jQuery.validator.addMethod("isEmail", function(value, element) {   
		return this.optional(element) || checkEmail(value);   
	}, " * 请正确输入邮箱地址"); 
	
	// 添加验证方法 (手机号码)
	jQuery.validator.addMethod("isTelphone", function(value, element) {   
		return this.optional(element) || checkTelphone(value);   
	}, " * 请正确输入手机号码！"); 
	
    $("#regForm").validate({
    	rules: {
			username:{ 
				required:true,
				isUsername: true
			},
			password:{
				required:true,
				isPassword:true		 
			},		
			email:{
				required:true,
				isEmail:true
			},
			repassword: {
				required: true,
				equalTo: "#password"
			},
			telPhone: {
				required: true,
				isTelphone:true
			}
		},
		messages: {
			username: {
				required:" * 请输入用户名"
			},
			password:{
				required:" * 请输入密码"
			} ,
			email:{
				required:" * 请输入邮箱"
			},
			repassword: {
				required: " * 请输入确认密码",
				equalTo: " * 确认密码输入不正确"
			},
			telPhone: {
				required: " * 请输入手机号码"
				
			}
		},
    	//当验证错误时候在指定的区域内显示错误提示
        errorPlacement: function (lable, element){	 
             var replacement = element.parent().find("span");
             var hidden = element.parent().find("font");
             lable.appendTo(replacement);
             hidden.hide();
        },
        //当验证正确的时候删除提示内容
        success: function (replacement){
        	replacement.val("");
        	replacement.parent().find("font").show();
        },
        submitHandler: function(form){
        	 var formValue = $("#regForm").serialize();
    		 $.ajax({
    		    type: "POST",
    		    cache: false,
    		    url:"${pageContext.request.contextPath}/registering",
    		    data:formValue,
    		    success: function(msg){
    		 		var obj = $.parseJSON( msg );
    				if( "200" == obj.responseCode )  {
    					window.location.href = "${pageContext.request.contextPath}";
    				}else{
    					alert(obj.info);
    				}
    		    }
    		  });
        }
    });
    
    // 异步登陆请求
    $("#loginBtn").click(function(){
    	
		 var formValue = $("#userForm").serialize();
		 $.ajax({
		    type: "POST",
		    cache: false,
		    url:"${pageContext.request.contextPath}/logining",
		    data:formValue,
		    success: function(msg){
		    	var obj = $.parseJSON( msg );
				if( "200" == obj.responseCode )  {
					window.location.href = "${pageContext.request.contextPath}";
				}else{
					alert(obj.info);
				}
		    				        
		    }
		  });
	});
    
});
</script>

</head>
<body>
<!-- 登陆注册大背景图片 -->
<div id="login_bg">
    <!-- 顶部 -->
    <div id="header_holder">
        <div id="header">
            <div id="logo"><a href="#">南方后街</a></div>
        </div>
    </div>
    <!-- 登陆注册 -->
  	<div id="login_content">
        <div id="content_btn">
            <a id="content_left_login" onclick="selectTag('content_left','content_right','content_left_login')">登录</a>
            <a id="content_left_register" onclick="selectTag('reg_1','reg_1','content_left_register')">注册</a>
        </div>
        <div id="content_left">
            <form:form id="userForm" commandName="userForm" action="" onsubmit="javascript:return false;">
                <div class="content_left_table">
                    <ul>
                        <li><span class="input_text">用户名：</span><input type="text" name="username" /></li>
                        <li><span class="input_text">密&nbsp;&nbsp;&nbsp;码：</span><input type="password" name="password" /></li>
                    </ul>
                </div>
                <div id="content_left_span2"></div>
                <div class="content_left_3">
                    <input type="submit" value="登 录" id="loginBtn" name="login" />
                </div>
                <div class="content_left_3">
                    <a href="javascript:" onclick="selectTag('reg_1','reg_1','content_left_register')">新用户注册</a>
                </div>
            </form:form>
        </div>

        <div id="reg_1">
            <div class="reg_1_1">       
                <form:form id="regForm" commandName="userForm" action="" onsubmit="javascript:return false;">
                    <input type="hidden" name="userType" value="1"/>
                    <ul>
                        <li class="reg_1_1_1">
                        	<div class="register_text">用&nbsp;户&nbsp;名&nbsp;：</div>
                            <input type="text" name="username" class="input_border"/>
                            <font class="reg_prompt">/5-30位字母、数字或下划线的组合</font>
                            <span class="error_reg"></span>
                            
                        </li>
                        <li class="reg_1_1_1">
                        	<div class="register_text">密　　码：</div>
                        	<input type="password" name="password" id="password" class="input_border"/>
                            <font class="reg_prompt">/6-30位字母、数字或下划线的组合</font>
                            <span class="error_reg"></span>
                        </li>
                        <li class="reg_1_1_1">
                        	<div class="register_text">确认密码：</div>
                        	<input type="password" name="repassword" class="input_border" />
                            <span class="error_reg"></span>
                        </li>
                        <li class="reg_1_1_1">
                        	<div class="register_text">电子邮件：</div>
                        	<input type="text" name="email" class="input_border"/>
                        	<span class="error_reg"></span>
                        </li>
                        <li class="reg_1_1_2">
                            <div class="reg_1_1_2_1">性　　别：</div>
                            <input name="gender" type="radio" value="男" class="reg_man" checked="checked" />
                            <div class="reg_1_1_2_2_1">男</div>
                            <input type="radio" class="reg_woman" name="gender" value="女" />
                            <div class="reg_1_1_2_3_1">女</div>  
                        </li>
                        <li class="reg_1_1_1">
                        	<div class="register_text">联系电话：</div>
                        	<input type="text" name="telPhone" class="input_border"/>
                             <font class="reg_prompt">/长号</font>
                            <span class="error_reg"></span>
                        </li>
                    </ul>
                    <span class="reg_1_1_3"><input type="submit" value="注册" name="register" id="regBtn" /></span>
                </form:form>
            </div>
            <div class="content_3"></div>
        </div>

        <div id="content_right">
            <div class="content_right_1">
                  <div class="content_right_title">最新信息发布</div>
          	</div>
            <div class="content_right_solidline"></div>
            <div class="content_right_3">
                <div id="content_right_2">
                    <div class="content_right_2_1">
                        <a href="#"><img src="${pageContext.request.contextPath}/images/avatar_01.jpg" width="50" height="50"/></a>
                        <ul>
                            <li class="content_right_2_1_1"><a href="#">新生，有便宜书卖。</a>
                            <li class="content_right_2_1_2"><a href="#">书名：《马克思主义基本原理概论》</a></li>
                        </ul>
                    </div>
                    <div class="content_right_2_1">
                        <a href="#"><img src="${pageContext.request.contextPath}/images/avatar_02.jpg" width="50" height="50" /></a>
                        <ul>
                            <li class="content_right_2_1_1"><a href="#">各位新手有野益你地啦~平价二手书~~~</a>
                                <li class="content_right_2_1_2"><a href="#">书名：《会计学基础》</a></li>
                        </ul>
                    </div>
                    <div class="content_right_2_1">
                        <a href="#"><img src="${pageContext.request.contextPath}/images/avatar_03.jpg" width="50" height="50" /></a>
                        <ul>
                            <li class="content_right_2_1_1"><a href="#">新生，有便宜书卖。</a>
                                <li class="content_right_2_1_2"><a href="#">书名：马克思主义基本原理概论</a></li>
                        </ul>
                    </div>
                    <div class="content_right_2_1">
                        <a href="#"><img src="${pageContext.request.contextPath}/images/avatar_04.jpg" width="50" height="50" /></a>
                        <ul>
                            <li class="content_right_2_1_1"><a href="#">新生，有便宜书卖。</a>
                                <li class="content_right_2_1_2"><a href="#">书名：马克思主义基本原理概论</a></li>
                        </ul>
                    </div>
                    <div class="content_right_2_1">
                        <a href="#"><img src="${pageContext.request.contextPath}/images/avatar_05.jpg" width="50" height="50" /></a>
                        <ul>
                            <li class="content_right_2_1_1"><a href="#">新生，有便宜书卖。</a>
                                <li class="content_right_2_1_2"><a href="#">书名：马克思主义基本原理概论</a></li>
                        </ul>
                    </div>
                    <div class="content_right_2_1">
                        <a href="#"><img src="${pageContext.request.contextPath}/images/avatar_06.jpg" width="50" height="50" /></a>
                        <ul>
                            <li class="content_right_2_1_1"><a href="#">中国近代史纲要，二手转</a>
                                <li class="content_right_2_1_2"><a href="#">书名：《中国近代史纲要》</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 底部 -->
<jsp:include page="footer.jsp" />

</body>
</html>